Angular এ ফর্ম এবং ইনপুট হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ এবং শক্তিশালী ফিচার। এটি ব্যবহারকারীর ইনপুট সংগ্রহ, যাচাই (validation), এবং ডেটা ম্যানিপুলেশন করার জন্য ব্যবহৃত হয়। Angular ফর্ম দুটি প্রধান ধরনের হতে পারে: Template-driven Forms এবং Reactive Forms। এই দুই ধরনের ফর্মই Angular অ্যাপ্লিকেশনগুলোতে ইনপুট হ্যান্ডলিংকে সহজ এবং কার্যকর করে তোলে।
১. Template-driven Forms
Template-driven forms একটি সহজ এবং declarative ফর্ম সমাধান, যেখানে ফর্ম এবং ইনপুট উপাদানগুলি HTML টেমপ্লেটে সংজ্ঞায়িত হয়। এই ফর্মগুলিতে Angular এর NgModel ডিরেকটিভ ব্যবহার করা হয় ইনপুট ফিল্ডের জন্য।
১.১ Template-driven Form Example
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input type="text" name="name" ngModel required></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input type="email" name="email" ngModel required></ion-input>
</ion-item>
<ion-button expand="full" type="submit" [disabled]="!form.valid">Submit</ion-button>
</form>
#form="ngForm": ফর্ম রেফারেন্স তৈরির জন্য।ngModel: ফর্ম ইনপুটের জন্য দুটি-way ডাটা বাইন্ডিং পরিচালনা করে।required: ইনপুটের জন্য ওয়ালিডেশন, যা ইনপুট ফিল্ডটি পূর্ণ হওয়া প্রয়োজন।(ngSubmit)="onSubmit(form)": ফর্ম সাবমিট হওয়ার পর onSubmit() মেথড কল হবে।
১.২ কম্পোনেন্ট কোড
import { Component } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.page.html',
styleUrls: ['./form.page.scss'],
})
export class FormPage {
onSubmit(form: any) {
console.log(form.value); // Form data
}
}
২. Reactive Forms
Reactive Forms হল একটি আরো শক্তিশালী এবং স্কেলেবল ফর্ম সমাধান, যেখানে ফর্ম মডেলটি কম্পোনেন্ট কোডে সংজ্ঞায়িত হয় এবং টেমপ্লেটটি কেবল ভিউ হিসেবে কাজ করে।
২.১ Reactive Form Example
প্রথমে ReactiveFormsModule ইম্পোর্ট করতে হয়:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.page.html',
styleUrls: ['./reactive-form.page.scss'],
})
export class ReactiveFormPage {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
name: ['', [Validators.required]],
email: ['', [Validators.required, Validators.email]],
});
}
onSubmit() {
console.log(this.form.value); // Form data
}
}
২.২ টেমপ্লেট (HTML)
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input type="email" formControlName="email"></ion-input>
</ion-item>
<ion-button expand="full" type="submit" [disabled]="!form.valid">Submit</ion-button>
</form>
[formGroup]="form": এই ডিরেকটিভটি ফর্মকে কম্পোনেন্টের FormGroup এর সাথে যুক্ত করে।formControlName="name": ফর্ম কন্ট্রোলের জন্য নাম এবং মান।
৩. Form Validation
Angular এ ফর্ম যাচাই খুবই সহজ। আপনি প্রকারভেদে ইনপুট ফিল্ডে বিভিন্ন ধরণের যাচাই সেট করতে পারেন।
৩.১ Template-driven Form Validation
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input type="text" name="name" ngModel required></ion-input>
</ion-item>
<ion-item *ngIf="form.submitted && !form.controls.name?.valid">
<ion-text color="danger">Name is required</ion-text>
</ion-item>
<ion-button expand="full" type="submit">Submit</ion-button>
</form>
*ngIf="form.submitted && !form.controls.name?.valid": ফর্ম সাবমিট হলে এবং ইনপুট না পূর্ণ হলে একটি বার্তা দেখাবে।
৩.২ Reactive Form Validation
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
<ion-item *ngIf="form.controls.name.invalid && form.controls.name.touched">
<ion-text color="danger">Name is required</ion-text>
</ion-item>
<ion-button expand="full" type="submit" [disabled]="!form.valid">Submit</ion-button>
</form>
form.controls.name.invalid && form.controls.name.touched: ফর্ম কন্ট্রোল যদি অকার্যকর হয় এবং ব্যবহারকারী সেটি টাচ করেছে, তখন একটি ত্রুটি বার্তা দেখানো হয়।
৪. Input Handling in Forms
Angular ফর্মের ইনপুট হ্যান্ডলিং খুব সহজ। আপনি ফর্মের ইনপুটের মান বা পরিবর্তন সহজেই ট্র্যাক করতে পারেন।
৪.১ Template-driven Forms - NgModel
<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input type="text" name="name" [(ngModel)]="name" required></ion-input>
</ion-item>
<p>Your name is: {{ name }}</p>
[(ngModel)]="name": এইভাবে ইনপুট মান two-way binding এর মাধ্যমে সংযুক্ত হয়। ইনপুটে পরিবর্তন করলে তাnameভ্যারিয়েবলে সেভ হয়ে যায়।
৪.২ Reactive Forms - FormControl
<ion-item>
<ion-label position="floating">Name</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
<p>Your name is: {{ form.controls.name.value }}</p>
form.controls.name.value: এইভাবে আপনিformControlNameদিয়ে ইনপুটের মান ট্র্যাক করতে পারেন।
Angular Forms এবং Input Handling এর মাধ্যমে আপনি খুব সহজেই ফর্ম তৈরী, ইনপুট সংগ্রহ এবং যাচাই করতে পারেন। Template-driven ফর্ম সাধারণত সহজ এবং ছোট ফর্মের জন্য ব্যবহার করা হয়, তবে Reactive ফর্মে ডাটা ম্যানেজমেন্ট আরও শক্তিশালী এবং স্কেলেবল। Angular এ ফর্মের মাধ্যমে ডাটা সংগ্রহ ও যাচাই করার সুবিধা থাকায় আপনি ফর্মের সাথে কাজ করতে অনেক সহজ হবে।
Read more
